<template>
    <div>
        <div class="box" ref="box">
            <div class="box-item" ref="item">
                <div v-for="i in arr">
                    <img :src="i.img" alt="">
                </div>
            </div>

            <ul class="circle-box">
                <li v-for="(i, v) in arr" :key="i.name" class="circle" @click="tz(v)"
                    :class="v == dqye ? 'active' : ''"></li>
            </ul>
            <div class="btn-box">
                <button class="btn1" @click="prev">上一个</button>
                <button class="btn2" @click="next">下一个</button>
            </div>
        </div>
        <button @click="fire">go</button><br>
        <input v-model="textToSpeak" placeholder="输入要播报的文本"></input>
        <button @click="speak">播放语音</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const item = ref(null)
const box = ref(null)
const textToSpeak = ref("")
const router = useRouter()
const arr = ref([
    {
        name: '1',
        img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
    },
    {
        name: '2',
        img: 'https://img.yzcdn.cn/vant/apple-2.jpg'
    },
    {
        name: '3',
        img: 'https://img.yzcdn.cn/vant/apple-3.jpg'
    }
])

let wy = ref(0)
let dqye = ref(0)

const fire = () => {
    router.push({
        name: 'lx',
        params: {
            arr: '1',
            wy: '2',
            dqye: '3'
        }
    })
}
function speak() {
    console.log(textToSpeak.value, 'textToSpeak.value')
    // 使用浏览器的SpeechSynthesis API进行语音播放
    const speech = new SpeechSynthesisUtterance(textToSpeak.value);
    speech.lang = "zh-CN"; // 设置语音的语言，这里示例为中文
    speech.rate = 1; // 设置语速，默认为1（正常语速）
    speech.pitch = 1; // 设置语调，默认为1（正常语调）
    console.log("正在播放语音:", speech);

    // 监听语音播放结束事件
    speech.onend = function (event) {
        console.log('语音播放结束');
        // 可以在这里执行播放完成后的其他操作
    };

    // 监听语音播放错误事件
    speech.onerror = function (event) {
        console.error('语音播放错误:', event.error);
        // 可以在这里处理播放错误的情况
    };
    // 执行语音播放
    window.speechSynthesis.speak(speech);
}
function next() {
    if (dqye.value == arr.value.length - 1) {
        wy.value = 0
        dqye.value = 0
        item.value.style.transform = `translateX(${0}px)`
        return
    }
    wy.value = wy.value - 500
    dqye.value++
    // console.log(item.value, 'item')
    item.value.style.transition = 'all 0.5s'
    item.value.style.transform = `translateX(${wy.value}px)`
}

function prev() {
    console.log(dqye.value)

    if (dqye.value == 0) {
        dqye.value = arr.value.length - 1
        wy.value = -500 * (arr.value.length - 1)
        item.value.style.transition = 'all 0.5s'
        item.value.style.transform = `translateX(${wy.value}px)`
        return
    }
    // console.log(item.value, 'item')
    wy.value = wy.value + 500
    dqye.value--

    item.value.style.transition = 'all 0.5s'
    item.value.style.transform = `translateX(${wy.value}px)`
}

function tz(nums) {
    console.log(nums, 'nums')
    wy.value = -500 * nums
    dqye.value = nums
    item.value.style.transition = 'all 0.5s'
    item.value.style.transform = `translateX(${wy.value}px)`
}



onMounted(() => {
    // // 定义变量来存储鼠标按下时的位置
    // var startX = 0;

    // // 添加鼠标按下事件监听器
    // box.value.addEventListener('mousedown', function (event) {
    //     event.preventDefault(); // 阻止默认的鼠标点击行为
    //     // 记录鼠标按下时的位置
    //     startX = event.clientX;
    //     console.log('Mouse click:', startX)
    // });


    // // 添加鼠标松开事件监听器
    // box.value.addEventListener('mouseup', function (event) {
    //     event.preventDefault(); // 阻止默认的鼠标点击行为
    //     // 在鼠标松开后执行操作，比如打印最终位置值
    //     console.log('Final mouse position:', event.clientX);

    //     if (event.clientX - startX > 0) {
    //         prev()
    //     } else {
    //         next()
    //     }
    // });

})



</script>

<style lang="scss" scoped>
$w: 500;

ul,
li {
    list-style: none
}

.box {
    width: #{$w}px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    .box-item {
        display: flex;
        flex-wrap: nowrap;


        img {
            width: #{$w}px;
            margin: 0 auto;
            object-fit: cover;
        }
    }

    .circle-box {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;


        .circle {
            width: 10px;
            height: 10px;
            margin: 0 10px;
            border-radius: 50%;
            background-color: #aaa;
            opacity: 0.5;
            cursor: pointer;

            &.active {
                background-color: #000;
            }
        }
    }

    .btn-box {
        width: 100%;
        height: 50px;
        position: absolute;
        top: 45%;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }
}
</style>